/**
 * Created by hejg on 2018/5/7.
 */
import React, {Component} from 'react';
import {
    ScrollView,
    View,
    StyleSheet,
    Text,
    Button,
    TouchableOpacity,
    StatusBar, Platform
} from 'react-native';
import {observable, computed, action} from 'mobx';
import {observer} from 'mobx-react/native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Header from '../../../components/Header';
import Style from '../../../components/Style';
import {withNavigation} from 'react-navigation';

export default class IndexScreen extends Component {
    static navigationOptions = {
        // title: 'Lots of features here',
        header: null,
        tabBarIcon: ({focused, tintColor}) => {
            return <FontAwesome name={`envelope-o${focused ? '' : ''}`} size={20} color={Style.color.yellow}/>;
        },
        tabBarLabel: '评估'
    };
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <ScrollView style={styles.container}>
                <Header headerTitle="地市体检表" headerLeft={<View/>}/>
                <View style={styles.titleView}>
                    <Text style={{fontSize:Style.fontSize.normal, }}>分公司评估体系预警</Text>
                </View>
                <View>
                    <ListItem index={0} name={'自贡'} score={70}/>
                    <ListItem index={1} name={'绵阳'} score={70}/>
                    <ListItem index={2} name={'雅安'} score={70}/>
                    <ListItem index={3} name={'德阳'} score={71}/>
                    <ListItem index={4} name={'凉山'} score={70}/>
                </View>
            </ScrollView>
        );
    }
}

const ListItem  =withNavigation(class ListItem extends Component {
    render() {
        return (
            <TouchableOpacity
                onPress={()=>this.props.navigation.navigate('ExaminaDetail',{headerTitle:'体检报告-'+this.props.name})}
                style={[styles.listView,{backgroundColor:this.props.index>2?Style.color.white:'#dce6f2',}]}>
                <View style={{justifyContent:'center',width:'20%'}}>
                    <Text>1 ST</Text>
                </View>
                <View style={{flexDirection:'column',width:'50%'}}>
                    <Text style={styles.cityText}>{this.props.name}</Text>
                    <Text style={styles.listGroupText}>集团组别:<Text style={styles.listEngText}>B</Text></Text>
                </View>
                <View  style={{flexDirection:'column',width:'30%', alignItems:'center'}}>
                    <Text>综合得分</Text>
                    <Text style={{color:Style.color.lightRed}}>{this.props.score}</Text>
                </View>
            </TouchableOpacity>
        );
    }
})

const styles = StyleSheet.create({
    container: {
        flex: 1, backgroundColor: Style.color.screen
    },
    listView: {
        height: Style.css.titleHeight, flexDirection: 'row', marginTop: 10,
    },
    titleView: {
        paddingLeft: 20,
        alignItems: 'center',
        flex: 1,
        height: Style.css.listHeight,
        flexDirection: 'row',
        backgroundColor: Style.color.white
    },
    listEngText: {color: Style.color.heightBlue, fontSize: Style.fontSize.large},
    listGroupText:{color:Style.color.gray,fontSize:Style.fontSize.small},
    cityText:{color:Style.color.black, fontSize:Style.fontSize.normal}
})